<template>
  <el-dialog
    :title="title ? '策略修改':'新增策略'"
    :visible.sync="showBlogForm"
    custom-class="mini-dialog dialog-style" :close-on-click-modal="false"
    @closed="closeClear">
    <!--label-width="80px" 依照標題字數去設-->
      <el-form :model="ruleForm" :rules="rules" class="form" size="small" ref="ruleForm" v-loading="loading"
                   element-loading-customClass="loadingClass" element-loading-spinner="dafa-icon-loading01 dafa-icon" @keyup.native.enter="submitForm('ruleForm')" @submit.native.prevent>
        <el-form-item label="策略名称" prop="planName">
          <el-select v-model="ruleForm.id" placeholder="请选择要绑定的策略">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    <!--    footer-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeClear" size="mini">取 消</el-button>
        <el-button :disabled="submitLoading" type="primary" size="mini" @click.stop="submitForm('ruleForm')" :loading="submitLoading"> 确 定</el-button>
      </div>
  </el-dialog>
</template>
<script>
import Api from '@/api/base'
import {dateFormat} from '../../../utils'
// import {checkNotHttp} from '@/utils/validate'
export default {
  data () {
    return {
      title: false,
      showBlogForm: false,
      loading: false,
      submitLoading: false,
      options: [],
      ruleForm: {
        id: ''
      },
      rules: {
        id: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    value: Boolean,
    data: Object
  },
  computed: {
    screenW () {
      return 1024
    }
  },
  mounted () {
    this.getPlanList()
  },
  methods: {
    getPlanList () {
      let parame = {
        page: 1,
        size: 100
      }
      this.loading = true
      Api.getPlanList(parame).then(res => {
        this.loading = false
        if (res.code === 200) {
          res.data.content.forEach((v) => {
            let res1 = []
            let arr = v.effectiveTime && JSON.parse(v.effectiveTime)
            arr && arr.forEach((v) => {
              res1.push(`${v.startTime} ${v.endTime}`)
            })
            v.effectiveTime = res1.toString()
            v.updateTime = dateFormat(v.updateTime)
          })
          this.options = res.data.content
        }
      })
    },
    closeClear () {
      this.$emit('input', false)
      this.resetForm('ruleForm')
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.submitLoading = true
          this.addPostFrom()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addPostFrom () {
      let parame = {
        id: this.ruleForm.id
      }
      Api.addRB(parame).then(res => {
        this.loading = false
        this.submitLoading = false
        if (res.code === 200) {
          this.msgSuccess('保存成功')
          this.closeClear()
          this.$parent.getList()
        }
      }).catch(e => {
        this.loading = false
        this.submitLoading = false
      })
    }
  },
  watch: {
    value (nv) {
      this.showBlogForm = nv
      this.ruleForm.id = ''
    }
  }
}
</script>
